<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

const props = withDefaults(defineProps<{
    tableData: Array<any>
	previewInfo: Function
}>(), {
	tableData: () => ([
        {
            id:1,
            storeName: '雁塔店',
			useCardMoney: 4566,
			rechargeMoney: '666', 
			giveMoney: 89555,
			useGiveMoney: 565, 
			principalDebtMoney: 5645,
			giveDebtMoney: 56,
			needCount: 56
        }
    ]),
	previewInfo: (id: number) => {}
})

const previewInfo = (id: number) => {
	props.previewInfo(id)
}
</script>

<template>
    <main>
        <el-table :data="props.tableData" style="width: 100%">
				<el-table-column label="门店"  prop="storeName" /> 
				<el-table-column label="充值金额"  prop="rechargeMoney" />
				<el-table-column label="已耗卡金额"  prop="useCardMoney" />
				<el-table-column label="赠送金额"  prop="giveMoney" />
				<el-table-column label="已消耗赠送金额"  prop="useGiveMoney" />
				<el-table-column label="本金负债金额"  prop="principalDebtMoney" />
				<el-table-column label="赠送负债金额"  prop="giveDebtMoney" />

				<el-table-column label="操作">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="previewInfo(scope.row.id)">查看详情</el-link>
					</template>
				</el-table-column>
			</el-table>
    </main>
</template>

<style lang='scss' scoped>

</style>